<template>
  <div class="price39">
    <div class="price39-tab">
      <van-tabs
        sticky
        background="linear-gradient(90deg, #ffa033 0%, #ff8030 100%) 0% 0%/100%"
        title-inactive-color="#ff7300"
        @click="onClick"
      >
        <van-tab
          v-for="nav in navs"
          :key="nav.id"
          :title="nav.title"
          :name="nav.id"
        >
          <div class="price39-cantainer">
            <div class="price39-bg"></div>
            <div class="price39-list">
              <GoodList />
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
import GoodList from "@/components/PostAgeList/index.vue";
import { useStore } from "vuex";
export default defineComponent({
  setup() {
    const store = useStore();
    const state = reactive({
      navs: [
        {
          id: 9,
          title: "全部",
        },
        {
          id: 22467,
          title: "生活百货",
        },
        {
          id: 22472,
          title: "文娱车品",
        },
        {
          id: 22526,
          title: "手机伴侣",
        },
      ],
    });
    const getGoodLists = (cid: number, pageNo: number, pageSize: number) => {
      return store.dispatch({
        type: "postAge/getGoodLists",
        params: {
          cid,
          pageNo,
          pageSize,
        },
      });
    };
    const onClick = (cid: number) => {
      getGoodLists(cid, 1, 10);
    };
    return {
      onClick,
      ...toRefs(state),
    };
  },
  components: {
    GoodList,
  },
});
</script>

<style lang="stylus" scoped>
.price39-tab
  margin-top -.01rem
  /deep/.van-tab__text
    display inline-block
    height .2rem
    background: hsla(0,0%,100%,.6);
    border-radius: .1rem;
    padding: 0 .12rem;
    font-size: .13rem;
    color: #ff7300;
  /deep/.van-tabs__wrap--scrollable .van-tab
    padding 0 .05rem
  /deep/.van-tab__text
    background #fff
.price39-cantainer
  background #eee
  height 10rem
  position relative
  .price39-bg
    width 100%
    height 1.2rem
    background linear-gradient(90deg,#ffa033,#ff8030) no-repeat
    border-radius 0 0 20% 20%
    z-index 100
  .price39-list
    width 100%
    position absolute
    top .2rem
</style>
